<template>
  <div class="center-bottom-wrap">
    <div class="item bottom-left-wrap">
      <Card>
        <div slot="title">工程数据</div>
        <div class="chart-box">
          <e-line :chartData="abnormalData" v-if="leftChartShow" />
        </div>
      </Card>
    </div>
    <div class=" item bottom-right-wrap">
      <Card>
        <div slot="title">外部数据</div>
        <div class="chart-box">
          <div class="data-box">
            <table>
              <tr v-for="(item, index) of tableList" :key="index.toString()">
                <td class="index-num">{{index + 1}}</td>
                <td v-for="(obj, index) of item" :key="index" :class="{'active': obj.active}">{{ obj.value }}</td>
              </tr>
            </table>
          </div>
        </div>
      </Card>
    </div>
    <Spin fix v-show="ycsytLoading">加载中...</Spin>
  </div>
</template>
<script>
import { merge, each, max, zip, fill } from 'lodash'
import { createNamespacedHelpers } from 'vuex'
import { eLineOptions } from './chartOptions'
const { mapActions, mapState } = createNamespacedHelpers('spareGas')

export default {
  name: 'spare-gas-center-bottom',
  components: {
    ELine: () => import('@/commons/charts/ELine')
  },
  computed: {
    ...mapState(['abnormalList', 'ycsytLoading']),
    leftChartShow() {
      return this.abnormalList && this.abnormalList.length > 0
    },
    abnormalData() {
      const _xAiaxList = []
      const _serList = []
      const _pList = []
      each(this.abnormalList, item => {
        const { hour, usage, ...rest } = item
        _xAiaxList.push(hour)
        _serList.push({
          hour,
          name: hour,
          value: usage,
          ...rest
        })
        _pList.push(usage)
      })
      return merge({}, eLineOptions, {
        xAxis: {
          data: _xAiaxList
        },
        series: [
          {
            type: 'line',
            data: _serList
          }
        ]
      })
    },
    tableList() {
      const _dataList = []
      each(this.abnormalList, item => {
        const { usage } = item
        _dataList.push(usage)
      })
      if (!_dataList || _dataList.length < 1) {
        return
      }
      const _dMaxList = max(_dataList)
        .toString()
        .split('.')
      const _intLen = _dMaxList[0].length
      const _newList = []
      each(_dataList, (item, index) => {
        if (item !== null) {
          const _itemStr = item.toString()
          const _itemList = _itemStr.split('.')
          const _intP = _itemList[0] || []
          const _floatP = _itemList[1] ? ['.', ..._itemList[1]] : []
          const _cIntLen = _intP.length
          const _m = _intLen - _cIntLen
          const _intL = _intP.split('')
          if (_m > 0) {
            for (let i = 0; i < _m; i++) {
              _intL.unshift('0')
            }
          }
          _newList.push([..._intL, ..._floatP])
        } else {
          _newList.push(fill(Array(_intLen), undefined))
        }
      })
      const _retList = this.arrToObj(_newList)
      const _errList = this.filterNum(_newList)
      each(_errList, (item) => {
        const [_a, _b] = item
        _retList[_b][_a].active = true
      })
      return _retList
    }
  },
  methods: {
    ...mapActions([]),
    arrToObj(list = []) {
      const _retList = []
      each(list, (item) => {
        const _objList = []
        each(item, (num) => {
          _objList.push({
            value: num,
            active: false
          })
        })
        _retList.push(_objList)
      })
      return _retList
    },
    filterNum(list = []) {
      const _newArr = zip(...list)
      const _retList = []
      for (let i = 0; i < _newArr.length; i++) {
        let _cNum
        for (let j = 0; j < _newArr[i].length; j++) {
          if (j === 0) {
            _cNum = _newArr[i][j]
          } else if (_newArr[i][j] !== undefined) {
            if (_cNum !== _newArr[i][j]) {
              _retList.push([i, j])
              break
            }
          }
        }
        if (_retList.length >= 2) break
      }

      return _retList
    }
  }
}
</script>
<style lang="less" scoped>
.center-bottom-wrap {
  position: relative;
  width: 100%;
  height: 100%;

  .item {
    display: inline-block;
    width: 50%;
    height: 100%;
    box-sizing: border-box;
  }

  .bottom-left-wrap {
    padding-right: 5px;
  }
  .bottom-right-wrap {
    padding-left: 5px;
  }
  .chart-box {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .data-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;

    table {
      padding: 10px;
      width: 100%;
      font-size: 16px;
      box-sizing: border-box;
      color: #fff;
    }
    td {
      text-align: center;
    }
    .index-num {
      font-size: 12px;
      width: 26px;
      opacity: .6;
    }
    .active {
      border: 1px solid #ff0000;
      color: #ff0000;
    }
  }
}
</style>
